import { PureComponent } from "react";
import { Button, Flex } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull, combineDefaultStr } from "../../../utils/helper"
interface Props {
	value: any,
	onChange: Function,
	allow_clear?: any,
	setFieldsValue: Function,
	field: string[],
	label?: string,
	required?: any,
	show_label?: any,
	tips?: string,
	label_width?: any,
	list: any[],
	dispatch: Function,
	formDataKey: string,
	dataset_key: string,
	fd: object,
	default_select_index?: any,
	hasError: boolean,
	errorMsg: string,
	label_text_color?: string,
	label_text_align?: any,
	is_start?: any
}
interface State {
	value: any
}
export default class MyRadioGroup extends PureComponent<Props, State>{
	public state: State = {
		value: this.props.value
	}
	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		let oldVal = this.state.value;
		let { allow_clear } = this.props;
		if (allow_clear == 1) {
			if (oldVal === value) {
				value = undefined;
			}
		}
		this.changeValue(value);
	};
	render() {
		let { setFieldsValue, field, label, required, show_label, tips, label_width = 5, list, dispatch, formDataKey, dataset_key, fd, default_select_index, hasError, errorMsg, label_text_color, label_text_align = "left", is_start } = this.props;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value } = this.state;
		let loading = fd[dataset_key + "Loading"];
		let oldVal = value;
		if (loading === false && list.length > 0) {
			if (!isNull(oldVal)) {
				let newVal = combineDefaultStr(list, oldVal);
				dispatch({
					type: "form/setStateFd",
					payload: {
						formDataKey,
						value: {
							[dataset_key + "Loading"]: undefined
						}
					}
				});
				if (oldVal !== newVal) {
					setFieldsValue({
						[field[0]]: newVal
					});
				}
			}
			else {
				if (oldVal === undefined && !isNull(default_select_index)) {
					try {
						setFieldsValue({
							[field[0]]: list[default_select_index].code
						});
					}
					catch (e) {
						console.log(e);
					}
				}
				dispatch({
					type: "form/setStateFd",
					payload: {
						formDataKey,
						value: {
							[dataset_key + "Loading"]: undefined
						}
					}
				})
			}
		}
		let newVal = combineDefaultStr(list, value);
		if (newVal !== value) {
			return null
		}

		let newList = [];
		if (list && list.length > 0) {
			list.map((i, k) => {
				// if(k<3){// 只取前三个
				newList.push(
					{
						...i,
						label: i.name,
						value: i.code
					}
				)
				// }
			})
		}

		let requiredClass = "am-list-item am-input-item am-list-item-middle mi-text mi-radio-group";
		if (isRequired) {
			requiredClass += " required"
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}

		let onExtraClick = () => {
			MToast.info(tips, 2, null, false)
		};
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		return (
			// <div>
			<div>
				<div className={requiredClass} style={{ fontSize: "16px" }} data-flex="box:first">
					{
						isShowLabel ? <div className={labelClass} style={{ color: label_text_color }}>
							{label}
						</div> : <div></div>
					}
					<div style={{ color: "#888", paddingRight: "0" }} className="am-list-line" data-flex="dir:left box:last">
						<Flex className="radio-group" wrap="wrap" justify={is_start == 1 ? 'start' : 'end'}>
							{
								newList.length > 0 ? newList.map((i, k) => {
									let buttonStyle = {
										borderRadius: 0,
										borderRightWidth: 0
									};
									if (k == 0) {
										buttonStyle = {
											...buttonStyle,
											borderRadius: "5px 0 0 5px"
										}
									}
									if (k == newList.length - 1) {
										buttonStyle = {
											...buttonStyle,
											borderRadius: "0 5px 5px 0",
											borderRightWidth: 1
										}
									}
									// if(k<3){
									return <Button key={i.code} size="small" type={value === i.code ? "primary" : undefined} onClick={() => this.onChange(i.code)} style={buttonStyle}>{i.name}</Button>
									// }
								})
									: <p style={{ color: "rgb(187,187,187)" }}>暂无数据</p>
							}
						</Flex>
						<div className="am-input-error-extra mi" onClick={(e) => {
							e.stopPropagation();
							MToast.info(errorMsg, 2, null, false)
						}} style={{ minWidth: "21px", width: "21px" }}
						/>
					</div>
				</div>
				{tips && <p className="tipsStyle">{tips}</p>}
			</div>
		)
	}
}
